<template>
<div>
  <v-card width="100%" height="120">
    <v-row>
      <v-col class="text-h3">广告招租中！！</v-col>
      <v-divider/>
      <v-col cols="1">
        <v-btn class="mt-5" elevation="0" fab small>X</v-btn>
      </v-col>
    </v-row>
  </v-card>
  <v-system-bar  height="50" color="#221c63" style="color: white">
    <v-container class="ml-16 pl-16">
      <v-row dense>
        <v-col cols="1">店铺首页</v-col>
        <v-col cols="1">推荐1</v-col>
        <v-col cols="1">推荐2</v-col>
        <v-col cols="1">推荐3</v-col>
        <v-col cols="1">推荐4</v-col>
        <v-col cols="1">推荐5</v-col>
      </v-row>
    </v-container>
  </v-system-bar>
  <v-container>
    <v-row no-gutters>
      <v-col cols="5">
        <img-zoom width="418" height="418" :min-i-m-gsrc="goods.originalImg" scale="3"/>
        <v-img
            contain width="80"
            class="float-left"
            v-for="img in goods.goodsImageList" :key="img.id"
            :src="img.imgUrl"
        ></v-img>

      </v-col>
      <v-col cols="7">
        <v-list>
          <v-list-item>
            <span class="text-h6">
              {{goods.goodsName}}
            </span>
          </v-list-item>
          <v-list-item>
            <span class="caption">
              {{goods.goodsRemark}}
            </span>
          </v-list-item>
          <v-divider/>
          <v-card-text>
            <v-subheader>价格</v-subheader>
            <v-row>
              <v-col cols="2" class="text-end">
                单价：
              </v-col>
              <v-col cols="2" class="text-start">
                <span class="ml-6 red--text text-h5">¥{{selectPrice}}</span>
              </v-col>
              <v-spacer></v-spacer>
              <v-col cols="2" class="text-end">合计：</v-col>
              <v-col cols="2" class="text-start"><span class="ml-6 red--text text-h5">¥{{selectPrice}}</span></v-col>
              <v-col cols="3"/>
            </v-row>

          </v-card-text>
          <ul class="tm-ind-panel text-center caption">
            <v-row>
              <v-col cols="4">
                <span>月销量</span>
                <span class="red--text">666</span>
              </v-col>
              <v-divider vertical/>
              <v-col cols="4">
                <span>累计评价</span>
                <span class="red--text">123w</span>
              </v-col>
              <v-divider vertical/>
              <v-col cols="4">
                <span>亲，购买不送积分</span>
              </v-col>
            </v-row>
          </ul>
          <v-divider/>
          <v-list >
            <v-subheader>选择规格</v-subheader>
              <v-list-item
                  v-for="i in 3"
                  :key="i"
              >
                <v-list-item-icon class="mr-0 mt-6" style="width: 100px">
                  <div class="text-right">规格1：</div>
                </v-list-item-icon>
                <v-list-item-content>
                  <v-chip-group
                      mandatory
                      column
                      color="red"
                  >
                    <v-chip  filter outlined label v-for="j in 12" :key="j">123G+666G</v-chip>
                  </v-chip-group>
                </v-list-item-content>
              </v-list-item>
          </v-list>
          <v-divider/>
          <v-list-item>
            <v-list-item-icon class="mr-0 mt-10" style="width: 100px">
              <div class="text-right">数量：</div>
            </v-list-item-icon>
            <v-list-item-content class="pt-10 px-3">
              <v-col cols="8">
                <v-slider
                    v-model="bpm"
                    track-color="grey"
                    min="1"
                    max="10"
                    thumb-label="always"
                >
                  <template v-slot:prepend>
                    <v-icon
                        color="primary"
                        @click="decrement"
                    >
                      mdi-minus
                    </v-icon>
                  </template>

                  <template v-slot:append>
                    <v-icon
                        color="primary"
                        @click="increment"
                    >
                      mdi-plus
                    </v-icon>
                  </template>
                </v-slider>
              </v-col>
              <v-col cols="4">
                <span style="position:relative; top: -15px">库存数量999</span>
              </v-col>
            </v-list-item-content>
          </v-list-item>
          <v-list-item>
            <v-col cols="1"></v-col>
            <v-col cols="4">
              <v-btn block large color="primary">立即购买</v-btn>
            </v-col>
            <v-col cols="1"></v-col>
            <v-col cols="4">
              <v-btn block large color="error"><v-icon>mdi-cart</v-icon>加入购物车</v-btn>
            </v-col>
            <v-col cols="1"></v-col>
          </v-list-item>
        </v-list>
      </v-col>
    </v-row>
    <br/>
    <v-card width="100%" height="80">
      <v-row>
        <v-col class="text-h5">又是一个广告！！</v-col>
        <v-divider/>
        <v-col cols="1">
          <v-btn class="mt-5" elevation="0" fab small>X</v-btn>
        </v-col>
      </v-row>
    </v-card>
    <br/>
    <v-row >
      <v-col cols="2">
        <v-card>
          <v-card-title>
            某某老店
          </v-card-title>
          <v-card-text>
            <table>
              <tr>
                <td>描述</td>
                <td>服务</td>
                <td>物流</td>
              </tr>
              <tr class="red--text">
                <td>4.8++</td>
                <td>4.4++</td>
                <td>6.6</td>
              </tr>
            </table>
          </v-card-text>
          <v-card-actions>
            <v-btn text>进入店铺</v-btn>
            <v-btn text>收藏店铺</v-btn>
          </v-card-actions>
        </v-card>
      </v-col>
      <v-col cols="10">
        <v-card color="basil">
          <v-card-title class="text-center justify-center py-6">
            <h1 class="font-weight-bold text-h2 basil--text">
              MAGIC-SHROOM
            </h1>
          </v-card-title>

          <v-tabs
              v-model="tab"
              background-color="transparent"
              color="basil"
              grow
          >
            <v-tab
                v-for="item in items"
                :key="item"
            >
              {{ item }}
            </v-tab>
          </v-tabs>

          <v-tabs-items v-model="tab">
            <v-tab-item
            >
              <v-card
                  color="basil"
                  flat
              >
                <mavon-editor
                    :value="goods.goodsContent"
                    defaultOpen="preview"
                    :boxShadow="false"
                    style="z-index:1;background-color: #fffbe6"
                    :editable="false"
                    :subfield="false"
                    :toolbarsFlag="false"
                ></mavon-editor>
              </v-card>
            </v-tab-item>
            <v-tab-item
            >
              <v-card
                  color="basil"
                  flat
              >
                <v-card-title>规格参数</v-card-title>
                <v-card-text>
                  <div v-for="(specification,i) in specificationsList" :key="i">
                    <v-subheader><strong>{{specification.key}}</strong></v-subheader>
                    <v-row v-for="(valueList,j) in specification.value" :key="j">
                      <v-col cols="3" class="text-right">{{valueList.key}}</v-col>
                      <v-col cols="9">{{valueList.value}}</v-col>
                    </v-row>
                    <br/>
                    <v-divider/>
                  </div>
                </v-card-text>

                <v-card-title>包装清单</v-card-title>
                <v-card-text>
                  <div>
                    <v-row v-for="(packingList,j) in packingLists" :key="j">
                      <v-col cols="3" class="text-right">{{packingList.name}}</v-col>
                      <v-col cols="9">{{packingList.num}}&nbsp;件</v-col>
                    </v-row>
                    <br/>
                    <v-divider/>
                  </div>
                </v-card-text>
              </v-card>
            </v-tab-item>
            <v-tab-item
            >
              <v-card
                  color="basil"
                  flat
              >
                <div style="width: 100%;border: 1px dotted #c9c9c9;">
                  <v-row no-gutters>
                    <v-col cols="3" class="text-center ">
                      <p>与描述相符：</p>
                      <p class="red--text text-h4">4.8</p>
                    </v-col>
                    <v-divider vertical/>
                    <v-col cols="1" ><div class="text-center caption">大<br/>家<br/>都<br/>写<br/>到</div></v-col>
                    <v-divider vertical/>
                    <v-col cols="8">
                      <div>
                        <v-chip
                            class="ma-2"
                        >
                          好东西
                        </v-chip>

                        <v-chip
                            class="ma-2"
                            color="red"
                            text-color="white"
                        >
                          坏东西
                        </v-chip>

                        <v-chip
                            class="ma-2"
                            color="green"
                            outlined
                        >
                          好东西
                        </v-chip>

                        <v-chip
                            class="ma-2"
                            color="orange"
                            label
                            outlined
                        >
                          坏东西
                        </v-chip>
                      </div>
                    </v-col>
                  </v-row>
                  <v-divider/>
                  <v-row>
                    <div class="float-start ml-5">
                      <v-radio-group row v-model="radioGroup">
                        <v-radio
                            label="全部"
                            :value="n"
                        ></v-radio>
                        <v-radio
                            label="有问题"
                            :value="n"
                        ></v-radio>
                        <v-radio
                            label="带图片"
                            :value="n"
                        ></v-radio>
                      </v-radio-group>
                    </div>
                    <div class="float-end ml-16 mt-2">
                      <v-rating
                          color="yellow darken-3"
                          background-color="grey darken-1"
                          empty-icon="$ratingFull"
                          half-increments
                          hover
                      ></v-rating>
                    </div>
                  </v-row>
                </div>
                <div style="width: 100%">
                  <v-row justify="center">
                    <v-row class="mt-5" style="min-height: 100px">
                      <v-expansion-panels v-model="panels" popout multiple>
                        <v-expansion-panel
                            hide-actions
                            v-for="i in expansion_items" :key="i"
                        >
                          <v-expansion-panel-header>
                            <v-row
                                align="center"
                                class="spacer"
                                no-gutters
                            >
                              <v-col
                                  cols="4"
                                  sm="2"
                                  md="1"
                              >
                                <v-avatar
                                    size="36px"
                                >
                                  <img
                                      alt="Avatar"
                                      src="../../assets/msg.png"
                                  >
                                </v-avatar>
                              </v-col>

                              <v-col
                                  class="hidden-xs-only"
                                  sm="5"
                                  md="3"
                              >
                                <strong>magic-shroom</strong>

                              </v-col>

                              <v-col
                                  class="text-no-wrap"
                                  cols="5"
                                  sm="3"
                              ></v-col>

                              <v-col
                                  class="grey--text text-truncate hidden-sm-and-down"
                              >
                                &mdash;
                                <div class="float-end ml-16 mt-2">
                                  <v-rating
                                      color="yellow darken-3"
                                      background-color="grey darken-1"
                                      empty-icon="$ratingFull"
                                      half-increments
                                      hover
                                  ></v-rating>
                                </div>
                              </v-col>
                            </v-row>
                          </v-expansion-panel-header>

                          <v-expansion-panel-content>
                            <v-divider></v-divider>
                            <v-card-text class="caption">
                              <p>
                                音质炸裂的10s，真的名不虚传，太爱了，特别是低音量下的音质，真的秒杀很多手机，调到50%音量，就是傲世群雄了哈哈哈，没有一个手机能比得上哈哈哈，
                                发热，散热控制得也很不错 ，续航挺好，拍照真的给了我惊喜，比米10要干净利落， 成像速度很不错，夜晚拍照和不错！，真的推荐啊，手机速度特别的快，爱了爱了
                              </p>
                              <v-divider inset/>
                              <p style="color: #ffcf98">解释：既见君子，云胡不喜。”自有一种欲言又止，眼波流转的韵致。用这样美丽的句子来概括形容我与你的第一次相识，再合适不过。【优惠可联系客服哦】</p>
                            </v-card-text>
                          </v-expansion-panel-content>
                        </v-expansion-panel>
                      </v-expansion-panels>
                    </v-row>
                  </v-row>
                  <span>&nbsp;</span>
                  <br/>
                </div>
                <br/>
                <br/>
                <div class="text-center">
                  <v-pagination
                      :length="6"
                  ></v-pagination>
                </div>
              </v-card>
            </v-tab-item>
          </v-tabs-items>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</div>
</template>

<script>
import ImgZoom from "@/components/ImgZoom";
import {request} from "@/network/request";
export default {
  name: "GoodsShow",
  components: {ImgZoom},
  data: () => ({
    bpm: 40,
    interval: null,
    isPlaying: false,
    tab: null,
    items: [
      '产品信息', '产品规格', '累计评价',
    ],
    expansion_items:10,
    panels:[],
    selectPrice:1000,
    goods:{},
    specificationsList:[],
    packingLists:[],

  }),
  created() {
    this.initGoods()
    this.initComment()
  },

  computed: {
  },

  methods: {
    decrement () {
      this.bpm--
    },
    increment () {
      this.bpm++
    },
    //初始化评论，让所有的评论展开
    initComment(){
      this.panels = [...Array(this.expansion_items).keys()].map((k, i) => i)
    },
    //初始化商品信息
    initGoods(){
      request({
        url:'/api/goods/getById',
        method:'GET',
        params:{
          goodsId:this.$route.query.goodsId
        }
      })
      .then(resp=>{
        this.goods =resp.data.data.goods
        console.log(resp.data.data)
        this.specificationsList=resp.data.data.specificationsList
        this.packingLists=resp.data.data.packingLists
      })
      .catch(err=>{})
    }
  },
}
</script>

<style scoped>
.tm-ind-panel {
  border: 1px dotted #c9c9c9;
  border-width: 1px 0;
  margin: -1px 20px 0 0;
  padding: 10px 0;
  position: relative;
  overflow: hidden;
  clear: both;
  display: flex;
}
/* Helper classes */
.basil {
  background-color: #FFFBE6 !important;
}
.basil--text {
  color: #356859 !important;
}
</style>
